<template>
    <div>
        <center>
            <h1>.Sync修饰符的操作</h1>
            <p>子组件想要花父组件的钱</p>
            <p>
                {{ title }}<br />
                {{ content }}
            </p>
            <button @click="spendMoney(100)">花父组件钱</button>
            <button @click="changeTitle">修改标题</button>
            <button @click="changeContent">修改内容</button>
        </center>
    </div>
</template>

<script>
export default {
    name: 'SyncChild',
    props: ['money', 'title', 'content'],
    methods: {
        spendMoney(count) {
            // this.money -= count;
            // this.$emit('money', this.money - count);
            this.$emit('update:money', this.money - count);
        },
        changeTitle() {
            this.$emit('update:title', '修改后的标题');
        },
        changeContent() {
            this.$emit('update:content', '修改后的内容');
        },
    },
};
</script>

<style></style>
